<!--<template>
    <div class="app-tab-bar">
        &lt;!&ndash; 通用下方导航 &ndash;&gt;
        <van-tabbar
                v-model="active"
                active-color="#ee0a24"
                inactive-color="#000"
                @change="onChange"
        >
            <van-tabbar-item icon="chart-trending-o" to="/todayProfit">收益详情</van-tabbar-item>
            <van-tabbar-item icon="label-o" to="/woolConfiguration">羊毛配置</van-tabbar-item>
&lt;!&ndash;            <van-tabbar-item icon="smile-o"  @click="jump()">任务配置</van-tabbar-item>&ndash;&gt;
            <van-tabbar-item>
                <span>任务配置</span>
                <template #icon="props">
                    <div v-html="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>


            <van-tabbar-item icon="user-o" to="/myInfo">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "app-tab-bar",
        data() {
            return {
                active: 0,
            }
        },
        methods: {
            jump() {
                window.location.href = process.env.VUE_APP_SMILE_URL;
            },
            onChange(m) {
                this.active = m;
            },
        },

        setup() {
            const active = ref(0);
            const icon = {
                inactive: '<svg t="1641648610422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="22" height="22"><path d="M553 186.4v-84h204.8c22.5 0 41-18.4 41-41 0-22.5-18.4-41-41-41H266.2c-22.5 0-41 18.4-41 41 0 22.5 18.4 41 41 41H471v84C264 207 102.4 381.5 102.4 593.9c0 226.2 183.4 409.6 409.6 409.6s409.6-183.4 409.6-409.6c0-212.4-161.7-387-368.6-407.5z m-41 735.2c-180.7 0-327.7-147-327.7-327.7s147-327.7 327.7-327.7 327.7 147 327.7 327.7-147 327.7-327.7 327.7z" p-id="4759"></path><path d="M532.5 556.5V368.6c0-22.5-18.4-41-41-41s-41 18.4-41 41v204.8c0 0.3 0.1 0.5 0.1 0.7 0 2.4 0.3 4.9 0.7 7.3 0.2 0.9 0.5 1.7 0.8 2.6 0.5 1.7 0.9 3.5 1.6 5.2 0.2 0.5 0.5 1 0.8 1.5 2 4.2 4.5 8.2 8 11.6l173.8 173.8c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L532.5 556.5z" p-id="4760"></path></svg>',
                active: '<svg t="1641648610422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="22" height="22"><path d="M553 186.4v-84h204.8c22.5 0 41-18.4 41-41 0-22.5-18.4-41-41-41H266.2c-22.5 0-41 18.4-41 41 0 22.5 18.4 41 41 41H471v84C264 207 102.4 381.5 102.4 593.9c0 226.2 183.4 409.6 409.6 409.6s409.6-183.4 409.6-409.6c0-212.4-161.7-387-368.6-407.5z m-41 735.2c-180.7 0-327.7-147-327.7-327.7s147-327.7 327.7-327.7 327.7 147 327.7 327.7-147 327.7-327.7 327.7z" p-id="4759" data-spm-anchor-id="a313x.7781069.0.i3" class="" fill="#DB3231"></path><path d="M532.5 556.5V368.6c0-22.5-18.4-41-41-41s-41 18.4-41 41v204.8c0 0.3 0.1 0.5 0.1 0.7 0 2.4 0.3 4.9 0.7 7.3 0.2 0.9 0.5 1.7 0.8 2.6 0.5 1.7 0.9 3.5 1.6 5.2 0.2 0.5 0.5 1 0.8 1.5 2 4.2 4.5 8.2 8 11.6l173.8 173.8c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L532.5 556.5z" p-id="4760" data-spm-anchor-id="a313x.7781069.0.i6" class="" fill="#DB3231"></path></svg>',
            };
            return {
                icon,
                 // active,
            };
        },




    };
</script>

<style>

</style>-->





<template>
    <div class="app-tab-bar">
        <!-- 通用下方导航 -->
        <van-tabbar
                v-model="active"
                active-color="#ee0a24"
                inactive-color="#000"
                @change="onChange"
                shape="round"
                route
        >
            <van-tabbar-item icon="chart-trending-o" to="/todayProfit">收益详情</van-tabbar-item>
            <van-tabbar-item icon="label-o" to="/woolConfiguration">羊毛配置</van-tabbar-item>
            <van-tabbar-item to="/taskConfig">
                <span>任务配置</span>
                <template #icon="props">
                    <div v-html="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/myInfo">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {ref} from "vue";

    export default {
        name: "app-tab-bar",
        data () {
            return {
                active:0
            }
        },
        methods: {
            onChange(m) {
                this.active = m
            },
        },
        setup() {
            const active = ref(0);
            const icon = {
                inactive: '<svg t="1641648610422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="22" height="22"><path d="M553 186.4v-84h204.8c22.5 0 41-18.4 41-41 0-22.5-18.4-41-41-41H266.2c-22.5 0-41 18.4-41 41 0 22.5 18.4 41 41 41H471v84C264 207 102.4 381.5 102.4 593.9c0 226.2 183.4 409.6 409.6 409.6s409.6-183.4 409.6-409.6c0-212.4-161.7-387-368.6-407.5z m-41 735.2c-180.7 0-327.7-147-327.7-327.7s147-327.7 327.7-327.7 327.7 147 327.7 327.7-147 327.7-327.7 327.7z" p-id="4759"></path><path d="M532.5 556.5V368.6c0-22.5-18.4-41-41-41s-41 18.4-41 41v204.8c0 0.3 0.1 0.5 0.1 0.7 0 2.4 0.3 4.9 0.7 7.3 0.2 0.9 0.5 1.7 0.8 2.6 0.5 1.7 0.9 3.5 1.6 5.2 0.2 0.5 0.5 1 0.8 1.5 2 4.2 4.5 8.2 8 11.6l173.8 173.8c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L532.5 556.5z" p-id="4760"></path></svg>',
                active: '<svg t="1641648610422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="22" height="22"><path d="M553 186.4v-84h204.8c22.5 0 41-18.4 41-41 0-22.5-18.4-41-41-41H266.2c-22.5 0-41 18.4-41 41 0 22.5 18.4 41 41 41H471v84C264 207 102.4 381.5 102.4 593.9c0 226.2 183.4 409.6 409.6 409.6s409.6-183.4 409.6-409.6c0-212.4-161.7-387-368.6-407.5z m-41 735.2c-180.7 0-327.7-147-327.7-327.7s147-327.7 327.7-327.7 327.7 147 327.7 327.7-147 327.7-327.7 327.7z" p-id="4759" data-spm-anchor-id="a313x.7781069.0.i3" class="" fill="#DB3231"></path><path d="M532.5 556.5V368.6c0-22.5-18.4-41-41-41s-41 18.4-41 41v204.8c0 0.3 0.1 0.5 0.1 0.7 0 2.4 0.3 4.9 0.7 7.3 0.2 0.9 0.5 1.7 0.8 2.6 0.5 1.7 0.9 3.5 1.6 5.2 0.2 0.5 0.5 1 0.8 1.5 2 4.2 4.5 8.2 8 11.6l173.8 173.8c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L532.5 556.5z" p-id="4760" data-spm-anchor-id="a313x.7781069.0.i6" class="" fill="#DB3231"></path></svg>',
            };
            return {
                icon,
                // active,
            };
        },
    };
</script>

<style></style>

